<%@ include file="/WEB-INF/jsp/common/include.jsp" %>
<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insertDefinition name="searchLayout.tiles">
  <tiles:putAttribute name="pageMessageKey">search.map</tiles:putAttribute>
  <tiles:putAttribute name="adMapTab" cascade="true">selected</tiles:putAttribute>
  <tiles:putAttribute name="searchResult" cascade="true">
    <style type="text/css">
      #map {
        width: 100%;
        height: 500px;
        border: 0px;
        padding: 0px;
      }
    </style>
    <div class="box white-box center-box-container">
      <div id="map"></div>
    </div>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
    <c:url value="/ad/search/osm.do" var="osmLink">
      <c:param name="minPrice" value="${searchParameters.minPrice}"/>
      <c:param name="maxPrice" value="${searchParameters.maxPrice}"/>
      <c:param name="room" value="${searchParameters.room}"/>
      <c:param name="city" value="${searchParameters.city}"/>
    </c:url>
    <script type="text/javascript">
        var map;
        OpenLayers.Popup.WIDTH = 250;
        function init(){
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                      numZoomLevels: 19,
                      maxResolution: 156543.0399,
                      units: 'm',
                      projection: new OpenLayers.Projection("EPSG:900913"),
                      displayProjection: new OpenLayers.Projection("EPSG:4326")
                    });

            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");

            map.addLayers([layerMapnik]);

            var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"<c:out value='${osmLink}' escapeXml='false'/>",
                      projection: map.displayProjection
                    });
            map.addLayer(pois);

            var lonLat = new OpenLayers.LonLat(27.555, 53.902).transform(map.displayProjection,  map.projection);
            map.setCenter (lonLat, 11);
        }
        init()
    </script>
  </tiles:putAttribute>
</tiles:insertDefinition>